<template>
    <div class="custom-list">        
        <ul class="list-item">
            1、如果是视频分类，鼠标右键，选择”在资源管理器中打开“找到mp4文件，直接导入，如下图：
            <br>
            <img src="@/assets/image/wallpaper-1.png"
                class="step-image-middle">
        </ul>
        <ul class="list-item">
            2、如果是场景类壁纸，鼠标右键，选择”发送至移动设备-导出.mpkg文件”，导出设置，选择<span class="highlight">高性能->保持原始宽高比->原始版本->60帧</span>，如下图：
            <br>
            <img src="@/assets/image/wallpaper-2.png"
                class="step-image">
            <br>
            <img src="@/assets/image/wallpaper-3.png"
                class="step-image">
        </ul>
        <ul class="list-item">
            3、<a href="https://www.123912.com/s/zjrTvd-41Gud"
                target="_blank" class="link">下载
                <span class="highlight">RePKG-GUI_v1.0.1.zip</span>
            </a> 解压出来，运行<span class="highlight">RePKG-GUI.exe</span>，导入下载的.mpkg文件，点击”提取”即可转换成mp4文件，如下图:
            <br>
            <img src="@/assets/image/wallpaper-4.png"
                class="step-image">
        </ul>
    </div>
</template>

<style scoped>
/* 列表样式 */
.custom-list {
    display: inline-block;

}

/* 列表项样式 */
.list-item {
    margin-bottom: 1rem;    
}
/* 链接样式 */
.link {
    font-weight: bold;
    text-decoration: none;
    color: white;
}
/* 高亮文本样式 */
.highlight {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
    display: inline-block;
    border-radius: 0.375rem;
    background-color: #60a5fa;
    padding: 5px 8px;
}
.step-image {
    margin-top: 1.25rem;
    display: inline-block;
    border-radius: 0.375rem;
    max-width: 100%;
    height: auto;
}
/* 步骤图片样式（大屏幕） */
@media (min-width: 1024px) {
    .step-image {
        width: 900px;
    }
}

.step-image-small {
    margin-top: 1.25rem;
    border-radius: 0.375rem;
    max-width: 100%;
    height: auto;
}

.step-image-middle {
    margin-top: 1.25rem;
    border-radius: 0.375rem;
    max-width: 100%;
    height: auto;
}
/* 步骤小图片样式（大屏幕） */
@media (min-width: 1024px) {
    .step-image-small {
        width: 400px;
    }
    .step-image-middle {
        width: 635px;
    }
} 
</style>